<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.nav{
			border:1px solid black;
			background: pink;
			padding-left: 0;
			width:800px;
			margin:200px auto;
		}
		.a1{
			padding: 0;
			list-style: none;
			border:1px solid salmon;
			margin-left: -5px;
			display: inline-block;
			width:199px;
			height: 40px;
			line-height: 40px;
			text-align: center;
		}
		#b1{
			position: relative;
		}
		.subnav{
			border: 1px solid salmon;
			display: none;
			position: absolute;
		}
		#b1:hover .subnav{
			display: block;
			background: lightblue;
		}
		.a2{
			list-style: none;
			border:1px solid salmon;
			display: inline-block;
			width:199px;
			line-height: 40px;
			text-align: center;
			margin-left: -45px;
		}
		#b2{
			position: relative;
		}
		.subnav{
			border: 1px solid salmon;
			display: none;
			position: absolute;
		}
		#b2:hover .subnav{
			display: block;
			background: lightblue;
		}
		.a3{
			list-style: none;
			border:1px solid salmon;
			display: inline-block;
			width:199px;
			line-height: 40px;
			text-align: center;
			margin-left: -45px;
		}
		#b3{
			position: relative;
		}
		.subnav{
			border: 1px solid salmon;
			display: none;
			position: absolute;
		}
		#b3:hover .subnav{
			display: block;
			background: lightblue;
		}
		.a4{
			list-style: none;
			border:1px solid salmon;
			display: inline-block;
			width:199px;
			line-height: 40px;
			text-align: center;
			margin-left: -45px;
		}
		#b4{
			position: relative;
		}
		.subnav{
			border: 1px solid salmon;
			display: none;
			position: absolute;
		}
		#b4:hover .subnav{
			display: block;
			background: lightblue;
		}
		.a5{
			list-style: none;
			border:1px solid salmon;
			display: inline-block;
			width:199px;
			line-height: 40px;
			text-align: center;
			margin-left: -45px;
		}
		.a2:hover{
			background: beige;
		}
		.a3:hover{
			background: beige;
		}
		.a4:hover{
			background: beige;
		}
		.a5:hover{
			background: beige;
		}
	</style>
</head>
<body>
	<ul class="nav">
		<li class="a1" id="b1">菜单一
			<ul class="subnav">
				<li class="a2">二级菜单</li>
				<li class="a2">二级菜单</li>
				<li class="a2">二级菜单</li>
			</ul>
		</li>
		<li class="a1" id="b2">菜单二
			<ul class="subnav">
				<li class="a3">二级菜单</li>
				<li class="a3">二级菜单</li>
				<li class="a3">二级菜单</li>
			</ul>
		</li>
		<li class="a1" id="b3">菜单三
			<ul class="subnav">
				<li class="a4">二级菜单</li>
				<li class="a4">二级菜单</li>
				<li class="a4">二级菜单</li>
			</ul>
		</li>
		<li class="a1" id="b4">菜单四
			<ul class="subnav">
				<li class="a5">二级菜单</li>
				<li class="a5">二级菜单</li>
				<li class="a5">二级菜单</li>
			</ul>
		</li>
	</ul>
</body>
</html>